<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>17商城</title>
  <link type="text/css" th:href="@{/css/css.css}" rel="stylesheet"/>
  <link type="text/css" rel="stylesheet" th:href="@{layui/css/layui.css}">
</head>

<body>
<div class="mianCont">
  <div th:replace="common/top :: ttoopp"></div>
  <div class="pnt">
    <div class="pntLeft">
      <h2 class="Title">所有商品分类
        <ul class="InPorNav" id="categoryUL">
        </ul>
      </h2>
    </div><!--pntLeft/-->
    <div class="pntRight">
      <ul class="nav">
        <li><a href="index.html">商城首页</a></li>
        <li class="navCur"><a href="product.html">促销中心</a></li>
        <li><a href="login.html">会员中心</a></li>
        <li><a href="help.html">帮助中心</a></li>
        <div class="clears"></div>
        <div class="phone">TEL：021-12345678</div>
      </ul><!--nav/-->
    </div><!--pntRight/-->
    <div class="clears"></div>
  </div><!--pnt/-->
  <div class="positions">
    当前位置：<a href="index.html">首页</a> &gt; <a href="#" class="posCur">促销商品</a>
  </div><!--positions/-->
  <div class="cont">
    <div class="jilu">
      总计 <span id="skuAmountSpan"></span> 条记录
    </div><!--jilu/-->

    <div class="contRight">
      <div class="frProList" id="skuDiv">
        <div class="clears"></div>
      </div><!--frProList-->
      <!--      分页-->
      <hr>
      <div id="laypage"></div>
    </div><!--contRight/-->
    <div class="clears"></div>
  </div><!--cont/-->
  <div th:replace="common/foot :: ffoooott"></div>
</div><!--mianCont/-->
</body>
<script type="text/javascript" th:src="@{/js/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/js.js}"></script>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script th:src="@{js/global.js}"></script>
<script type="text/javascript">
let pageNum = PAGE_NUM
let pageSize = PAGE_SIZE
let total    //总条数
let pages //一共多少页

$(function () {
  //热门搜索
  getSkuByHot()

  //显示商品类别
  getCategoryList();

  //具体的商品列表
  let pid = getUrlParms('pid')
  if (pid !== null) {
    //查询指定父类别下的所有子类别对应的商品
    showData('sku/v1/getSkusByCategoryPid/' + pid)
  } else {
    let id = getUrlParms('id')
    if (id !== null) {
      //查询所有指定类别的商品
      showData('sku/v1/getSkusByCategoryId/' + id)
    }else{
      let spuId = getUrlParms("spuId")
      if(spuId !== null){
        //根据Spu的id查找所有相关的sku
        showData('sku/v1/getSkusBySpuId/' + spuId)
      }
    }
  }
})

//查询指定父类别下的所有子类别对应的商品
function showData (url) {
  $.get(base_url + url + '/' + pageNum + '/' + pageSize, function (res) {
    if (res.code == 200) {
      total = res.data.total
      pages = res.data.pages

      // console.info(res)
      $('#skuAmountSpan').text(res.data.total)
      let skuItems = res.data.records
      let tmp = ''
      for (let i = 0; i < skuItems.length; i++) {
        let item = skuItems[i]
        // console.info(item)
        tmp += '<dl>'
        tmp += '<dt><a href="proinfo.html?id=' + item.id + '"><img src="' + IMG_SERVER + item.img + '" width="132" height="129"/></a></dt>'

        let json = JSON.parse(item.specs)
        let tt = ''
        for (let key in json) {
          tt += key + '-' + json[key] + ','
        }
        //删除最后一个逗号
        tt = item.name + ':' + tt.substr(0, tt.length - 1)
        tt = tt.length > 17 ? tt.substr(0, 17) : tt
        tmp += '<dd>' + tt + '</dd>'
        tmp += '<dd className="cheng">￥' + item.price1 + '/袋 <span>￥' + item.price2 + '</span></dd>'
        tmp += '</dl>'
      }
      $('#skuDiv').empty().append(tmp)
      //显示分页
      showPage(url)
    }
  })
}

//显示分页
function showPage (pid) {
  layui.use('laypage', function () {
    let laypage = layui.laypage
    //执行一个laypage实例
    laypage.render({
      elem: 'laypage',  //注意laypage是 ID，不用加 # 号
      count: total, //数据总数，从服务端得到
      limit: pageSize,   //每页条数设置
      limits: [10, 20, 30, 40],			//可选每页显示条数
      curr: pageNum,                      //起始页
      groups: 4,                     //连续页码个数
      prev: '上一页',               //上一页文本
      next: '下一页',                //下一页文本
      first: 1,                    //首页文本
      last: pages,                   //尾页文本
      layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
      jump: function (obj, first) {  //触发分页后的回调
        //obj包含了当前分页的所有参数，第一次加载first为true
        console.log(obj.curr) //得到当前页，以便向服务端请求对应页的数据。
        console.log(obj.limit) //得到每页显示的条数
        pageNum = obj.curr  //改变当前页码
        pageSize = obj.limit
        //首次不执行，一定要加此判断，否则初始时会无限刷新
        if (!first) {
          showData(pid)  //加载数据
        }
      }
    })
  })
}
</script>
</html>